<template>
    <div class="box">
        <div class="box_one">
            <p>MyCheckBox</p>
            <my-check-box v-model="myBox"/>
            <div>{{myBox}}</div>
        </div>
        <div class="box_one">
            <p>NewCheckBox</p>
            <new-check-box :checked.sync="newBox"/>
            <div>{{newBox}}</div>
        </div>
    </div>
</template>

<script>
    import MyCheckBox from '@/components/MyCheckBox'
    import NewCheckBox from '@/components/NewCheckBox'
    export default {
        name: "Compose",
        components: {MyCheckBox, NewCheckBox},
        // model: {
        //     prop: 'Box',
        //     event: 'update'
        // },
        // props: {
        //     Box: {
        //         type: Object,
        //         default: ()=>{}
        //     }
        // },
        props: ['my', 'new'],
        computed: {
            myBox: {
                get() {
                    // return this.Box.my
                    return this.my
                },
                set(val) {
                    this.$emit('update:my', val)
                }
            },
            newBox: {
                get() {
                    // return this.Box.new
                    return this.new
                },
                set(val) {
                    this.$emit('update:new', val)
                }
            }
        }
    }
</script>

<style scoped>
    .box{
        padding: 10px;
        border: 1px solid green;
        border-radius: 3px;
    }
    .box_one{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
</style>
